@import "../../common/styles/bootstrap/_functions.scss";
@import "../../common/styles/bootstrap/_variables.scss";
@import "../../common/styles/bootstrap/_mixins";
@import "../../common/styles/app/variables";

$system-prepare-bg: $dark;
$system-prepare-wd: 100px;
$system-prepare-hg: 30px;

.system-prepare {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: $system-prepare-bg;
  background-image: linear-gradient(90deg, $system-prepare-bg 10%, darken($system-prepare-bg, 5%) 90%); /* W3C */
  background-image: -webkit-linear-gradient(90deg, $system-prepare-bg 10%, darken($system-prepare-bg, 5%) 90%); /* Chrome 10+, Saf5.1+ */
  background-image: -moz-linear-gradient(90deg, $system-prepare-bg 10%, darken($system-prepare-bg, 5%) 90%); /* FF3.6+ */
  background-image: -o-linear-gradient(90deg, $system-prepare-bg 10%, darken($system-prepare-bg, 5%) 90%); /* Opera 11.10+ */
  background-image: -ms-linear-gradient(90deg, $system-prepare-bg 10%, darken($system-prepare-bg, 5%) 90%); /* IE10 */
  z-index: 9999;
  transition: opacity .65s;
}

.system-prepare-progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: $system-prepare-wd;
  height: $system-prepare-hg;
  background-image: url(../../../assets/img/systemPrepare/systemPrepare.full.png);
  background-size: $system-prepare-wd $system-prepare-hg;
  overflow: auto;
}

.system-prepare-hidden {
  display: none;
}

.system-prepare-hidden-add {
  opacity: 1;
  display: block;

  .system-prepare-progress {
    transition: transform .4s ease;
    transform: scale(0);
  }
}

.system-prepare-hidden-add-active {
  opacity: 0;
}
